<ui:composition template="../template/plantilla_01.xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
   
    <ui:define name ="panelCentral">

        <h:form id="formulario" prependId="false">

        <p:panel  id="pCarritoDetalle" style="min-height: 400px;" >
            
            <div class="ui-panel-titlebar">Carrito 
                    <div style="float:right;">
                        <img src="http://www.intercap.com.ar/imagenes/iconos/info-ayuda.png" title="Datos del carrito actual seleccionado"/>
                    </div>
                </div>

            <p:growl id="gCarritoDetalle" showDetail="true" life="10000" />

            <h:panelGrid columns="2" columnClasses="panelGridTop,panelGridTop,panelGridTop" rendered="#{not empty carritoBean.carrito}">
                
                <h:panelGrid columns="3" cellspacing="2" >

                        <h:panelGroup>

                            <h:panelGrid columns="2"  >
                                <h:outputText value="Nro Pedido:"/>
                                <h:outputText value="#{carritoBean.carrito.id.nrofor}" >
                                    <f:convertNumber  pattern="00000000" />
                                </h:outputText>
                                
                                <h:outputText value="Fecha:"/>
                                <h:outputText value="#{carritoBean.carrito.fchmov}" >
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </h:outputText>

                                <h:outputText value="Cliente:"/>
                                <h:outputText value="#{carritoBean.carrito.cliente.nombre}" title="Id" />

                            </h:panelGrid>
                        </h:panelGroup>

                        <h:panelGroup style="vertical-align: top" >
                            <h:outputText value="Notas: " />
                            <p:inputTextarea cols="60" rows="3" value="#{carritoBean.carrito.textos}" >
                                <p:ajax event="change" listener="#{carritoBean.guardarCarrito}" update="formulario" />
                            </p:inputTextarea>

                        </h:panelGroup>

                </h:panelGrid>
                
                <h:panelGrid columns="1"  style="width: 150px; margin-top:15px;" cellpadding="2" cellspacing="0">

                    <p:commandButton id="btnConfirmar" icon="ok16" style="width: 200px;"
                                     value="Confirmar Carrito"
                                     title="Haga click para confirmar el carrito actual"
                                     rendered="#{not empty carritoBean.carrito.itemsProducto}"                                     
                                     oncomplete="PF('dlgconfirmacionpedido').show()"
                                     process="@this"     />

                    <p:commandButton id="btnAnular" value="Anular Carrito" icon="trash16"  style="width: 200px;"
                                     title="Haga click para anular el carrito actual"                                     
                                     oncomplete="PF('dlgconfirmacionAnular').show()"
                                     process="@this" />

                    <p:tooltip for="btnConfirmar" showEffect="fade" hideEffect="fade" />
                    <p:tooltip for="btnAnular" showEffect="fade" hideEffect="fade" />

                </h:panelGrid>   
                
            </h:panelGrid>          

            <p:spacer height="5" />

            <p:tabView rendered="#{not empty carritoBean.carrito}">

                <p:tab title="Productos">

                    <p:dataTable id="tDetalle" value="#{carritoBean.carrito.itemsProducto}" var="i"
                                 emptyMessage="No tiene productos en el carrito" 
                                 
                                 style="font-size: 9.5px;">
                        
                        <!--
                        <p:column style="width: 10px;">
                            <h:outputText value="#{i.itemMovimientoVentaPK.nroitm}" />
                        </p:column>
                        -->

                        <p:column style="width: 42px;">

                            <p:lightBox rendered="#{not empty i.producto.imggra}" >

                                <h:outputLink value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.producto.imggra}.jpg"
                                              title="#{i.producto.descrp}">

                                    <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.producto.imgchi}.jpg"
                                                        width="60" height="60"
                                                        rendered="#{not empty i.producto.imgchi}" />
                                </h:outputLink>

                            </p:lightBox>

                            <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.producto.imgchi}.jpg"
                                            width="60" height="60"
                                            rendered="#{not empty i.producto.imgchi and empty i.producto.imggra}" />

                            <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}intercap.jpg"
                                            width="60" height="60"
                                            rendered="#{empty i.producto.imgchi}"
                                            style="border: 1px solid lightgrey;" />
                        </p:column>

                        <p:column headerText="Código" style="width:70px; text-align: center;" >
                            <h:outputText value="#{i.producto.codigo}"/>
                            <br/>
                            <h:outputText value="(#{i.producto.nroParte})" rendered="#{not empty i.producto.nroParte}" />
                        </p:column>

                        <p:column headerText="Descripción" style="width:225px;" >
                            <h:outputText value="#{i.producto.descrp}"/>
                        </p:column>

                        <p:column headerText="Present."  style="width:50px;">
                            <h:outputText value="#{i.producto.unidadConversion.unidad} #{i.producto.faccon} #{i.producto.unidadMedida.unidad} " />
                        </p:column>

                        <p:column headerText="Cant."  style="width:30px;text-align: right;" >
                            <h:outputText value="#{i.cantid}"  >
                                <f:convertNumber pattern="###" />
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Precio Unit." rendered="#{not(usuarioSessionBean.usuario.tipo=='V')}"
                                  style="width: 70px;text-align: right;">

                            <h:outputText value="#{i.precioFinalConIVA}"  >
                                <f:convertNumber pattern="$ 0.00" />
                            </h:outputText>

                        </p:column>

                        <p:column headerText="Precio Unit." rendered="#{usuarioSessionBean.usuario.tipo =='V'}"
                                  style="width: 83px;text-align: right;">

                            <h:outputText value="#{i.precioListaConIVA}"  >
                                <f:convertNumber pattern="$ 0.00" />
                            </h:outputText>                           

                        </p:column>

                        <p:column headerText="% Bonif 1" style="width: 60px;text-align: right;"  rendered="#{usuarioSessionBean.usuario.tipo =='V'}"  >

                            <h:outputText value="#{i.pctbf1}"  >
                                <f:convertNumber pattern="0.00 " />
                            </h:outputText>

                        </p:column>
                        
                        <p:column headerText="% Bonif 2" style="width: 60px;text-align: right;" rendered="#{usuarioSessionBean.usuario.tipo =='V'}"  >

                            <h:outputText value="#{i.pctbf2}"  >
                                <f:convertNumber pattern="0.00 " />
                            </h:outputText>                           

                        </p:column>                     

                        <p:column headerText="Total" style="width:80px;text-align: right;">

                            <h:outputText value="#{i.totalLineaConIVA}">
                                <f:convertNumber pattern="$ 0.00"  />
                            </h:outputText>
                            
                        </p:column>
                        
                        <p:column style="width: 70px; text-align: center;font-size: 10px;">

                            
                            <p:commandButton id="btnEdit" icon="edit"
                                             title="Haga click para modificar la cantidad"
                                             actionListener="#{carritoBean.seleccionarItemProducto(i)}"
                                             update=":formulario:confirmacionModificacion"
                                             process="@this"                                             
                                             oncomplete="PF('dlgModificacion').show(), btnModificar.focus();">

                            </p:commandButton>                           
                            
                            <p:commandButton id="btnDelete" icon="delete24"
                                             title="Haga click para borrar producto del carrito"
                                             actionListener="#{carritoBean.seleccionarItemProducto(i)}"
                                             update=":formulario:pgConfirmarBorrado"
                                             process="@this"                                             
                                             oncomplete="PF('dlgConfirmarBorrado').show(); btnBorrarProducto.focus();"  >
                            </p:commandButton>

                            <p:tooltip for="btnDelete" showEffect="fade" hideEffect="fade" />
                            <p:tooltip for="btnEdit"   showEffect="fade" hideEffect="fade" />

                        </p:column>

                        <f:facet name="footer" >
                            <div align="right" style="width: 820px;">
                                <h:outputText value="Importe total: " />
                                <h:outputText value="#{carritoBean.carrito.subTotalConIVA}" >
                                    <f:convertNumber pattern="$ 0.00" />
                                </h:outputText>
                            </div>
                        </f:facet>

                    </p:dataTable>

                </p:tab>
          
                
            </p:tabView>

            <p:spacer height="5" width="970" />

            <h:panelGroup layout="block" styleClass="grupoBotones" >

                <p:commandButton id="btnCatalogo" value="Ir al Catálogo"
                                         icon="catalog16" style="width: 140px;"
                                         title="Haga click para ver el catálogo de productos"
                                         action="#{catalogoBean.verCatalogo}"                                         
                                         process="@this"
                                         immediate="true" />

                <p:commandButton id="btnCarritos" value="Ver mis carritos" icon="detalle16"  style="width:140px;"
                                 title="Haga click para ver la lista de carritos pendientes"
                                 action="#{carritoBean.verListaCarrito}"                                 
                                 process="@this"
                                 immediate="true" />

                <p:commandButton id="btnNuevo" value="Nuevo carrito" icon="blank16" style="width:140px;"
                                 title="Haga click para generar un nuevo carrito"
                                 action="#{carritoBean.nuevoCarrito}"                                 
                                 process="@this"
                                 immediate="true" />

                <p:tooltip for="btnCatalogo" showEffect="fade" hideEffect="fade" />
                <p:tooltip for="btnCarritos" showEffect="fade" hideEffect="fade" />
                <p:tooltip for="btnNuevo" showEffect="fade" hideEffect="fade" />

            </h:panelGroup>



        </p:panel>

        <!-- CONFIRMAR CARRITO -->
        <ui:include src="../facturacion/carritoConfirmaPedido.xhtml" />
        <!-- CONFIRMAR ANULACION -->
        <ui:include src="../facturacion/carritoConfirmaAnular.xhtml" />
        

        <!-- BORRAR ITEM -->
        <p:dialog id="confirmacionBorrado" widgetVar="dlgConfirmarBorrado"
                  header="Confirmación de borrado" width="700"
                  draggable="false" resizable="false" position="center" modal="true">
            
            <h:panelGrid columns="2" id="pgConfirmarBorrado" style="width: 100%"  >

                <h:panelGroup>

                    <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}#{carritoBean.itemProductoFacturacion.producto.imgchi}.jpg" width="100" height="100"
                                    rendered="#{not empty carritoBean.itemProductoFacturacion.producto.imgchi}" />

                    <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}intercap.jpg" width="100" height="100" rendered="#{empty carritoBean.itemProductoFacturacion.producto.imgchi}"
                                    style="border: 1px solid lightgrey;" />

                </h:panelGroup>

                <h:panelGroup layout="div" style="vertical-align: middle;">
                    <h:outputText value="¿Esta seguro de borrar #{carritoBean.itemProductoFacturacion.producto.descrp}?" style="font-size: 12px; font-weight: bold;" />
                </h:panelGroup>

            </h:panelGrid>

            <div align="center">
                <p:commandButton value="Borrar Producto" icon="ok16" id="btnBorrarProducto"
                             update=":formulario, :fCabecera"
                             action="#{carritoBean.eliminarProducto(carritoBean.itemProductoFacturacion.producto)}"
                             process="@this"
                             oncomplete="PF('dlgConfirmarBorrado').hide(); " />

                <p:commandButton value="Cancelar" icon="delete24"  onclick="PF('dlgConfirmarBorrado').hide()"/>
            </div>
            <ui:include src="../template/ajaxStatus-I.xhtml" />
            
        </p:dialog>
      
        <!-- MODIFICAR CANTIDAD -->
        <p:dialog id="confirmacionModificacion" widgetVar="dlgModificacion"
                  header="Modificar cantidad"  width="700"
                  closable="false" resizable="false" position="center" modal="true"  >

            <h:panelGrid columns="2" id="pgModificarCantidad" style="width: 100%"
                         rendered="#{not empty carritoBean.itemProductoFacturacion}"  >

                <h:panelGroup>

                    <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}#{carritoBean.itemProductoFacturacion.producto.imgchi}.jpg" width="100" height="100"
                                    rendered="#{not empty carritoBean.itemProductoFacturacion.producto.imgchi}" />

                    <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}intercap.jpg" width="100" height="100" rendered="#{empty carritoBean.itemProductoFacturacion.producto.imgchi}"
                                    style="border: 1px solid lightgrey;" />

                </h:panelGroup>

                <h:panelGroup>

                    <h:outputText value="#{carritoBean.itemProductoFacturacion.producto.artcod} - #{carritoBean.itemProductoFacturacion.producto.descrp}"
                            style="font-size: 14px; font-weight: bold; text-align: center;" />

                    <p:spacer height="20" width="450"/>
                    
                    <h:panelGrid columns="4" >
                     
                        <h:outputText value="Cantidad: " />
                        <p:inputText id="cantidad" value="#{carritoBean.itemProductoFacturacion.cantid}" size="4" label="Cantidad" >
                           <f:convertNumber pattern="###" />
                        </p:inputText>

                        <h:outputText value="Bonificacion %: " rendered="#{usuarioSessionBean.usuario.tipo =='V'}" />
                        <p:inputText id="bonificacion"
                                   value="#{carritoBean.itemProductoFacturacion.pctbf2}" size="3"
                                   rendered="#{usuarioSessionBean.usuario.tipo =='V'}"
                                   label="Bonificacion" >

                            <f:convertNumber pattern="0.00" />
                        </p:inputText>

                     </h:panelGrid>

                </h:panelGroup>

             </h:panelGrid>

            <div align="center">
                <p:commandButton value="Modificar" icon="edit" id="btnModificar"
                             update=":formulario, :fCabecera"
                             action="#{carritoBean.actualizarCarrito}"
                             process="@this, cantidad,bonificacion"
                             oncomplete="PF('dlgModificacion').hide()" />

                <p:commandButton value="Cancelar" icon="delete24" onclick="PF('dlgModificacion').hide()" type="button"/>
            </div>
            <ui:include src="../template/ajaxStatus-I.xhtml" />

        </p:dialog>


        </h:form>

    </ui:define>

</ui:composition>
